<template>
  <div class="search-block">
    <div
      class="search-block-wrap sa-flex sa-row-between"
      :style="{ 'border-radius': `${compData.data.borderRadius}px` }"
    >
      <div class="sa-flex">
        <el-icon>
          <Search />
        </el-icon>
        <div class="placeholder sa-m-l-8">{{ compData.data.placeholder }}</div>
      </div>
      <div class="keywords sa-flex">
        <div
          class="keywords-item"
          v-for="k in compData.data.keywords"
          :key="k"
          :style="{ color: k.color }"
        >
          {{ k.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .search-block {
    min-height: 32px;
    font-size: 14px;
    color: #b0b3bf;
    .search-block-wrap {
      height: 32px;
      padding: 0 12px;
      border: 1px solid #eee;
      background: #fff;
      .placeholder {
        color: #b0b3bf;
      }
    }
    .keywords {
      height: 32px;
      font-size: 14px;
      .keywords-item {
        padding: 5px 4px;
      }
    }
  }
</style>
